<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">

                <el-form-item label="地标名称" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="地标名称" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="地标副标题" prop="subtitle">
                  <el-input v-model="ruleForm.subtitle" type="textarea" placeholder="地标副标题" :autosize="{ minRows: 6, maxRows: 10}" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="执门指数" prop="hotStar">
                  <div style="padding:7px 0 0 0">
                    <el-rate v-model="ruleForm.hotStar" :allow-half="true" show-score></el-rate>
                  </div>
                </el-form-item>

                <!-- <el-form-item label="AR地标类型" prop="arType">
                  <el-select v-model="ruleForm.arType" placeholder="请选择AR地标类型" style="width:400px">
                      <el-option label="AR地标" :value="1"></el-option>
                      <el-option label="AR广告" :value="3"></el-option>
                      <el-option label="AR道具" :value="4"></el-option>
                  </el-select>
                </el-form-item> -->

                <el-form-item v-if="ruleForm.arType==3 || ruleForm.arType==4" label="关联U3D物品" prop="">
                      <u3d-object-select :type="3" v-model="ruleForm.arObjectId" width='400px'/>
                </el-form-item>

                <el-form-item label="关联U3D城市地标">
                  <u3d-scene-select ref="u3dEle" :defaultTxt="defaultTxt" :type="3" v-model="ruleForm.relationU3dSceneId" width="400px" :disabled="onlyLook==1"/>
                </el-form-item>

                <template v-if="inputFlag">
                    <el-form-item label="地标定位地址" >
                      <el-input v-model="ruleForm.locationAddress" placeholder="请输入地图资源的定位地址"  style="width: 400px;" :disabled="onlyLook==1"/>
                      <span style="padding-left:10px"><el-button type="primary" plain @click="doInput(false)">地图选择</el-button></span>
                    </el-form-item>
                    <el-form-item label="经纬度">
                        <div style="display: inline;padding-right:5px">
                          <el-input v-model="ruleForm.locationLongitude" placeholder="经度" style="width: 195px;" :disabled="onlyLook==1"/>
                        </div>
                        <el-input v-model="ruleForm.locationLatitude" placeholder="纬度" style="width: 200px;" :disabled="onlyLook==1"/>
                    </el-form-item>
                </template>
                
                <el-form-item v-else label="地标定位地址" >
                  <el-input v-model="ruleForm.locationAddress" placeholder="请输入地图资源的定位地址"  style="width: 400px;" :disabled="onlyLook==1" @focus="openMap"/>
                  <span style="padding-left:10px"><el-button type="primary" plain @click="doInput(true)">手动输入</el-button></span>
                </el-form-item>

                <el-form-item label="地标区域关联">
                  <Address ref="eleAddress" v-if="!id || details" v-model="addressData" width="400px"  :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="商业面积">
                  <el-input v-model="ruleForm.commercialArea" placeholder="商业面积" style="width: 400px;" :disabled="onlyLook==1" @keyup.native="clearNoNum($event,'commercialArea')"/> m²
                </el-form-item>

                <el-form-item label="覆盖人群">
                  <el-input v-model="ruleForm.coveragePopulation" placeholder="覆盖人群（万人）" style="width: 400px;" :disabled="onlyLook==1" @keyup.native="clearNoNum($event,'coveragePopulation')"/> 万人
                </el-form-item>

                <el-form-item label="预估人流量">
                  <el-input v-model="ruleForm.visitorsFlowrate" placeholder="预估人流量" style="width: 400px;" :disabled="onlyLook==1"  @keyup.native="clearNoNum($event,'visitorsFlowrate')"/> 人/小时
                </el-form-item>

                <el-form-item label="经济体量">
                  <el-input v-model="ruleForm.economicVolume" placeholder="经济体量（万亿美元）" style="width: 400px;" :disabled="onlyLook==1" @keyup.native="clearNoNum($event,'economicVolume')"/> 万亿美元
                </el-form-item>

                <el-form-item label="AR头图" prop="headImageUrl">
                  <div class="upfileTips" style="display:flex">
                    <upload-file :limit="1" v-if="!id || details" v-model="ruleForm.headImageUrl" type="img"/>
                    <p>支持JPG、JFPG、PNG等图片格式，文件大小控制在2M以内</p>
                  </div>
                </el-form-item>
                <el-form-item label="AR视频" prop="videoUrl">
                  <div class="upfileTips" style="display:flex">
                    <upload-file :limit="1"  v-if="!id || details" v-model="ruleForm.videoUrl" type="video"/>
                    <p>支持MP4、AVI、MPEG、WMV、MOV等视频文件</p>
                  </div>
                </el-form-item>

                <el-form-item>
                    <template>
                        <template v-if="onlyLook==1">
                            <el-button icon="el-icon-back" @click="$router.back()" type="info">返回</el-button>
                            <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>
            </el-form>
            <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="960px" title="选择经纬度">
                <MapContainer ref="aMap" :showMap="true" @getPoint="getPoint" :point="defaultPoint"/> 
            </my-dialog>
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  add_arLandmark,
  get_Landmark_details,
  edit_Landmark_data,
  getArSceneList
} from '@/api/collext'
import uploadFile from '@/components/public/uploadFile.vue'
import Address from '@/components/public/address.vue'
import u3dSceneSelect from '@/components/public/u3dSceneSelect.vue'
import u3dObjectSelect from "@/components/public/u3dObjectSelect.vue";
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
import MapContainer from '@/components/public/MapContainer.vue'
import myDialog from '@/components/public/myDialog';
export default {
  name: '',
  components:{
    uploadFile,
    Address,
    u3dSceneSelect,
    u3dObjectSelect,
    myBack,
    MapContainer,
    myDialog
  },
  data() {
    return {
      ruleForm: {
        arType:1,
        arObjectId:'',
        commercialArea:'',
        coveragePopulation:'',
        economicVolume:'',
        headImageUrl:'',
        locationAddress:'',
        locationLatitude:'',
        locationLongitude:'',
        name:'',
        relationU3dMapId:'',	// U3D地图ID，查询：/boss/arscene/list
        relationU3dSceneId:'',// U3D场景ID，查询：/boss/arscene/list
        subLandmark:'',
        subtitle:'',
        valuation:'', // 地标初始估值，单位：万亿美元
        videoUrl:'',
        visitPvCount:'',	//运营维护的访问量(关注度)PV	
        visitPvMonthCount:'',	//运营维护的月访问量(关注度)PV
        visitUvCount:'',	//运营维护的访问量(关注度)UV
        visitUvMonthCount:'',	//运营维护的月访问量(关注度)UV
        visitorsFlowrate:'',
        wishCount:'',
        hotStar:5 
      },
      addressData:'',
      rules: {},
      defaultTxt:'',
      details:'',
      apiAddressCodes:[],
      id:'',
      onlyLook:'',
      dialogVisible:false,
      defaultPoint:{},
      btnLoading:false,
      arObjectDefaultTxt:'',
      inputFlag:false  // 地图选择地位地址和经纬度，true为手动输入
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_Landmark_details(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)

        this.defaultPoint.lng = res.data.locationLongitude
        this.defaultPoint.lat = res.data.locationLatitude
        this.ruleForm.arObjectId = 8
        // 处理区域
        this.addressData = {
          continentId:res.data.continentId, // 大洲ID
					continentName:res.data.continentName, //大洲名称
					countryId:res.data.countryId,  // 国家id
					countryName:res.data.countryName, // 国家名称
					cityId:res.data.cityId, // 城市id
					cityName:res.data.cityName, // 城市名称
					areaId:res.data.areaId,  // 区域id
					areaName:res.data.areaName // 区域名称
        }

        // 处理u3d地标
        getArSceneList({u3dMapId:res.data.relationU3dMapId})  // 获取u3d场景数据
        .then(res =>{
            let sceneNames = []
            res.data.forEach(item => {
                sceneNames.push(item.sceneName)
            });
            this.defaultTxt = sceneNames.join(',')
        })
      }
    }
  },
  methods: {
    getPoint(obj){
      this.ruleForm.locationLatitude = obj.lat,
      this.ruleForm.locationLongitude = obj.lng
      obj.address && (this.ruleForm.locationAddress = obj.address) 
      this.dialogVisible = false
    },
    // 确定
    save(formName) {
      
      if(!this.ruleForm.name){
        return this.$message.warning('请输入地标名称')
      }else if(!this.ruleForm.subtitle){
        return this.$message.warning('请输入地标副标题') 
      }else if((this.ruleForm.arType==3 ||this.ruleForm.arType==4) && !this.ruleForm.arObjectId){
        return this.$message.warning('请选择关联U3D物品') 
      }else if(!this.ruleForm.relationU3dSceneId){
        return this.$message.warning('请选择关联U3D城市地标')
      }else if(!this.ruleForm.locationAddress){
        return this.$message.warning('请输入地标定位地址')
      }else if(!this.ruleForm.locationLongitude){
        return this.$message.warning('请输入地标定位地址经度')
      }else if(!this.ruleForm.locationLatitude){
        return this.$message.warning('请输入地标定位地址纬度')
      }else if(!this.addressData){
        return this.$message.warning('请选择关联的区域')
      }else if(!this.ruleForm.commercialArea){
        return this.$message.warning('请输入商业面积')
      }else if(!this.ruleForm.coveragePopulation){
        return this.$message.warning('请输入覆盖人群')
      }else if(!this.ruleForm.visitorsFlowrate){
        return this.$message.warning('请输入预估人流量')
      }else if(!this.ruleForm.economicVolume){
        return this.$message.warning('请输入经济体量')
      }else if(!this.ruleForm.headImageUrl){
        return this.$message.warning('请上传AR头图')
      } 
      // else if(!this.ruleForm.videoUrl){
      //   return this.$message.warning('请上传AR视频')
      // }
      
      //this.btnLoading = true
      if(this.id){  // 编辑
          if(this.ruleForm.relationU3dSceneId!=this.details.relationU3dSceneId){
              // 获取u3d地图id
              this.ruleForm.relationU3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')
          }
          edit_Landmark_data({arLandmarkId:this.id,...this.ruleForm,...this.addressData}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error(res.message)
            }
            this.btnLoading = false
          })
      }else{  //新增
          // 获取u3d地图id
          this.ruleForm.relationU3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')

          this.getAddress()  // 处理地址
          add_arLandmark({...this.ruleForm,...this.addressData}).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error(res.message)
            }
            this.btnLoading = false
          })
      }
      
    },
    getAddress(){
        //  处理地址选择
        // const adObj = this.$refs.eleAddress.getCheckedNodes()
        // if(!adObj) return
        // this.ruleForm.provinceCode = adObj.province.code || ''
        // this.ruleForm.provinceName = adObj.province.name || ''
        // this.ruleForm.cityCode = adObj.city.code || ''
        // this.ruleForm.cityName = adObj.city.name || ''
        // this.ruleForm.districtCode = adObj.district.code || ''
        // this.ruleForm.districtName = adObj.district.name || ''
    },
    openMap(){
      if(this.addressCode && this.addressCode.length>0){
        this.getAddress()
      }
      this.dialogVisible=true
    },
    doInput(flag){
      this.inputFlag = flag  // 手动输入
    },
    clearNoNum(e,prop){
      let o = e.target
      o.value = o.value.replace(/[^\d.]/g,"") //清除"数字"和"."以外的字符
      o.value = o.value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
      o.value = o.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只保留第一个.清除多余的
      this.ruleForm[prop] = o.value
    }
  }
}
</script>

<style lang="scss" scoped>
  .colFlex{
  display: flex;
  .cfItem{
    flex: 1;
    padding: 0 0 0 10px;
  }
  &+.colFlex{
    margin: 10px 0 0 0;
  }
}
.addBtnBox{
  padding: 10px 0 0 0;
}
.upfileTips{
  display: flex;
  p{
    flex: 1;
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center; 
    line-height: 24px;
  }
}
</style>

<style lang="scss">
  .colFlex textarea{
    height: 148px !important;
  }
</style>


